<template>
  <div>
    <!-- 公共组件 上传组件-->
    <!-- 
      action: 配置的上传有效接口地址 如果直接上传到我们自己的服务器 这里可以直接配置
            但是 现在我们上传到三方服务器 用# 占个位置 放置组件校验 prop出错
      show-file-list： 是否显示上传列表
            :on-success上传完毕自动执行
      before-upload 回调函数 在上传前先做校验 只有校验通过才能实行正式的上传
      http-request 回调函数 完全自定义上传逻辑 适合不能直接上传给自己服务器 要通过一些自定义的写法 上传到三方
                  组件只负责图片校验 上传的部分它不管
    -->

    <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
      :http-request="upload"
    >
    <!--条件渲染 预览 图片位置 -->
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <!-- + 号 -->
      <i v-else class="el-icon-plus avatar-uploader-icon" />
      <!-- 在上传的回调中拿到当前的进度转化成白夫人牛逼 通过element-ui进度条显示到页面 -->
      <el-progress v-if="showProgress" type="circle" :percentage="percentage" class="progress"></el-progress>
    </el-upload>
  </div>
</template>

<script>
// 引入必要的COS模块
const COS = require("cos-js-sdk-v5");
// 配置密钥
// 实例化对象
const cos = new COS({
  // SecretId: 'xxxx', // 身份识别ID
  // SecretKey: 'xxxx' // 身份秘钥
  SecretId: "AKIDY7bBg08872tnhOsNincVHG3bzDG6slT8",
  SecretKey: "bCeu6EBwlP8pLxnkkeYPEvgS1Rgkglog",
});
export default {
  name: 'UploadImg',
  props: {
    url: {
      type: 'String',
      dafault: ''
    }
  },
  data() { 
    return {
      imageUrl: "",//把图片地址交给 父传子
      percentage: 0,
      showProgress: false
    };
  },
  watch: {
    url: function() {
      this.imageUrl = this.url
    }
  },
  methods: {
    upload({ file }) {
      this.showProgress = true
      // file文件对象 上传到三方服务器
      //  把文件通过cos调用三方服务器提供的api 进行上传
      // console.log(file);
      // 执行上传操作
      cos.putObject(
        {
          Bucket: "hihi-1319878975" /* 存储桶 */,
          Region: "ap-beijing" /* 存储桶所在地域，必须字段 */,
          Key: file.name /* 文件名 */,
          StorageClass: "STANDARD", // 上传模式, 标准模式
          Body: file, // 上传文件对象
          onProgress: (progressData) => {
            console.log(JSON.stringify(progressData));
            this.percentage =progressData.percent * 100
          },
        },
        (err, data) => {
          // 不管成功还是失败都会走这个回调
          // data代表上传成功的对象  err代表发生错误的的对象
          console.log(err || data);
          // 上传成功之后 回显
          if (data.statusCode === 200) {
            this.imageUrl = `https:${data.Location}`;
            this.$emit('get-url', this.imageUrl)
            this.showProgress = false
          }
        }
      );
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPNG) {
        this.$message.error("上传头像图片只能是 PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isPNG && isLt2M;
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.progress{
/* 进度条居中显示 */
  position: absolute;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;

}
</style>